<template>
<div class="wrapper" ref="wrapper">
    <div>
        <div class="list-area">
            <div class="list-title" ref="de">当前</div>
            <div class="list-button" @click="handlepresentClick">{{this.$store.state.city}}</div>
        </div>
        <div class="hot-area">
            <div class="hot-title">热门城市</div>
            <div class="hot-list">
                <div class="hot-button" v-for="item of hotlist" :key="item.id" @click="handleCurrentClick(item.name)">
                    {{item.name}}
                </div>

            </div>
        </div>
        <div class="alph-area">
            <div alph-wrapper v-for="(item,key) of cities" :key="key" :ref="key">
                <div class="alph-titie">{{key}}</div>
                <div class="alph-button" v-for="innerItem of item" :key="innerItem.id" @click="handleAlphClick(innerItem.name)">
                    {{innerItem.name}}
                    <div class="xx"></div>
                    <div class="xx"></div>
                </div>

            </div>
        </div>
    </div>
</div>
</template>

<script>
import BScroll from '@better-scroll/core'
import PullUp from '@better-scroll/pull-up'
import BMap from 'BMap'

//	引入组件

//	定义输出组件name
export default {
    name: 'locationList',
    //   接收传来的值
    props: {
        //   定义传来的值是String
        letter: String,
        cities: Object,
        hotlist: Array
    },
    //   定义侦听器
    watch: {
        //   侦听letter这个值
        letter() {
            console.log(this.letter)
            //   定义eee获取传来的letter值 
            const eee = this.$refs[this.letter]
            if (eee) {
                //   定义ee获取eee数组中的0号元素
                const ee = eee[0]

                //   设置视图去到ee号元素展示
                this.Scroll.scrollToElement(ee)
            } else {
                //   定义de获取当前de这个元素节点
                const de = this.$refs.de

                this.Scroll.scrollToElement(de)
            }
        }
    },
    //注册组件
    data() {
        return {
            city: '',
            eee: '',
            ee: '',
        }
    },
    mounted() {
        //定义固定视图去除滚动条

        // this.scroll = new BScroll(this.$refs.wrapper, {
        //     click: true,
        //     pullUpLoad: true,
        //     scrollX: true,

        //     eventPassthrough: 'vertical',
        //     mouseWheel: {
        //         speed: 20,
        //         invert: false,
        //         easeTime: 300

        //     }

        // })
        setTimeout(() => { //定时器
            this.initScroll()
        }, 500)
    },
    methods: {

        handleCurrentClick(city) {
            this.$store.dispatch('change', city)
            this.$router.push('/')
        },
        handleAlphClick(city) {
            this.$store.dispatch('change', city)
            this.$router.push('/')
        },
        handlepresentClick() {
            this.$router.push('/')
        },
        initScroll() {
            this.$nextTick(() => { //vue.$nextTick()方法来实现dom数据更新后延迟执行后续代码
                if (!this.Scroll) {
                    this.Scroll = new BScroll(this.$refs.wrapper, {
                        click: true, // 配置允许点击事件
                        scrollY: true, // 开启纵向滚动
                        pullUpLoad: true, //可使用{对象}添加更多功能
                        mouseWheel: {
                            speed: 20, //设置速度
                            invert: false,
                            easeTime: 300
                        }
                    })
                } else {
                    this.Scroll.refresh() // 重新计算 better-scroll，当 DOM 结构发生变化的时确保滚动效果正常

                }
                // console.log(this.Scroll)
            })
        }

    }

}
</script>

<style scoped>
.list-area {
    width: 100%;
}

.wrapper {
    overflow: hidden;
    width: 100%;
    height: 0px;
    padding-bottom: 165%;
    position: absolute;
    top: 38px;
    left: 0;
    bottom: 0;

}

.list-title,
.alph-titie,
.hot-title {
    padding: 10px 15px;
    background-color: #ccc;
}

.hot-area {
    background-color: #ccc;
    width: 100%;
    height: 145px;
}

.list-button,
.alph-button,
.hot-button {
    line-height: 20px;
    padding: 10px 10px;
    background-color: #fff;
    border-radius: 5px;
}

.list-button {
    width: 84%;
    margin-left: 0px;
    padding-left: 20px;
}

.hot-button {
    width: 15%;
    float: left;
    margin: 5px 8px;
}

.alph-area {
    clear: both;
}

.alph-button {
    width: 100%;
}

.xx {
    width: 100%;
    height: 0.5px;
    background-color: #ccc;

}
</style>
